import React from 'react';
import { Card, Row, Col, Statistic, Table, Button, Progress, Tag, Space } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  FileOutlined, 
  TeamOutlined,
  RiseOutlined,
  FallOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons';
import './index.css';

const Home: React.FC = () => {
  // 模拟统计数据
  const statistics = [
    { 
      title: '用户总数',
      value: 1234, 
      icon: <UserOutlined />,
      color: '#1890ff',
      growth: 12.5,
      trend: 'up',
      suffix: '人'
    },
    { 
      title: '订单总数', 
      value: 5678, 
      icon: <ShoppingCartOutlined />, 
      color: '#52c41a',
      growth: 8.2,
      trend: 'up',
      suffix: '单'
    },
    { 
      title: '文章总数', 
      value: 9012, 
      icon: <FileOutlined />, 
      color: '#faad14',
      growth: -3.1,
      trend: 'down',
      suffix: '篇'
    },
    { 
      title: '团队总数', 
      value: 3456, 
      icon: <TeamOutlined />, 
      color: '#f5222d',
      growth: 5.6,
      trend: 'up',
      suffix: '个'
    },
  ];

  // 模拟表格数据
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: (text: string) => (
        <Space>
          <UserOutlined style={{ color: '#1890ff' }} />
          {text}
        </Space>
      ),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '注册时间',
      dataIndex: 'registerTime',
      key: 'registerTime',
      sorter: (a: any, b: any) => new Date(a.registerTime).getTime() - new Date(b.registerTime).getTime(),
    },
    {
      title: '活跃度',
      dataIndex: 'activity',
      key: 'activity',
      render: (activity: number) => (
        <Progress 
          percent={activity} 
          size="small" 
          status={activity > 80 ? 'success' : activity > 50 ? 'normal' : 'exception'}
        />
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === '活跃' ? 'success' : 'default'}>
          {status === '活跃' ? <RiseOutlined /> : <FallOutlined />} {status}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space>
          <Button type="link" size="small">查看</Button>
          <Button type="link" size="small">编辑</Button>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      username: '张三',
      email: 'zhangsan@example.com',
      registerTime: '2024-01-01',
      activity: 85,
      status: '活跃',
    },
    {
      key: '2',
      username: '李四',
      email: 'lisi@example.com',
      registerTime: '2024-01-02',
      activity: 45,
      status: '离线',
    },
    {
      key: '3',
      username: '王五',
      email: 'wangwu@example.com',
      registerTime: '2024-01-03',
      activity: 92,
      status: '活跃',
    },
  ];

  return (
    <div className="home-container">

      点击发货克拉科夫国际服漏打卡
      <Row gutter={[16, 16]}>
        {statistics.map((stat, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card className="statistic-card">
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={stat.icon}
                suffix={stat.suffix}
                valueStyle={{ color: stat.color }}
              />
              <div className="statistic-footer">
                <span className={`trend ${stat.trend}`}>
                  {stat.trend === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  {Math.abs(stat.growth)}%
                </span>
                <span className="trend-text">较上周</span>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Card
        title="最近用户"
        className="recent-users-card"
        extra={<Button type="primary">查看全部</Button>}
      >
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            total: 100,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`
          }}
        />
      </Card>
    </div>
  );
};

export default Home;